/* eslint-disable react/prop-types */
import React from 'react';
import { Button, Balloon } from '@teamix/ui';
import intl from '../../locale';

const { Tooltip } = Balloon;

const Modal = ({
  visible,
  title,
  desc,
  trialOrder,
  closeFn,
  descMoreUrl,
  lock,
  isAdmin,
  isEndTrial,
  premiumVersion,
  orgId,
  handleEnter,
  advancedBuyUrl,
  reasonText,
}) => {
  return (
    <React.Fragment>
      {visible ? (
        <div className="billing-modal-name">
          <div className="modal-backdrop" />
          <div className="lock-billing-content">
            <div className="billing-left">
              <img
                className="sideImg"
                src="https://img.alicdn.com/imgextra/i3/O1CN0144b6t11Rs4Z3BTDss_!!6000000002166-2-tps-530-812.png"
                alt=""
              />
            </div>
            <div className="billing-right">
              <div className="main">
                <div className="title">{title}</div>
                <div className="desc">{desc}</div>
                <div className="descMoreUrl">
                  <a href={descMoreUrl} target="_blank" rel="noreferrer">
                    {intl.get({
                      id: 'code-assets.components.billing.billingModal.LearnMore',
                      defaultMessage: '了解更多',
                    })}
                  </a>
                </div>

                <div className="expire">{reasonText}</div>
                <div className="btns">
                  {lock === 'normal' && !isEndTrial && (
                    <Tooltip
                      align="t"
                      trigger={
                        <Button type="primary" onClick={handleEnter} style={{ marginRight: 16 }}>
                          {intl.get({
                            id: 'code-assets.components.billing.billingModal.Immediately',
                            defaultMessage: '立即',
                          })}
                          {premiumVersion
                            ? intl.get({
                                id: 'code-assets.components.billing.billingModal.Into',
                                defaultMessage: '进入',
                              })
                            : '体验'}
                        </Button>
                      }
                    >
                      <span>
                        {premiumVersion
                          ? intl.get(
                              {
                                id: 'code-assets.components.billing.billingModal.FreeTrialToTrialorder',
                                defaultMessage: '免费试用至 {trialOrder}',
                              },
                              { trialOrder },
                            )
                          : intl.get({
                              id: 'code-assets.components.billing.billingModal.FreeTrialForDays',
                              defaultMessage: '免费试用 90 天',
                            })}
                      </span>
                    </Tooltip>
                  )}

                  {isAdmin ? (
                    <>
                      <Button
                        type={reasonText ? 'primary' : 'normal'}
                        style={{ marginRight: 16 }}
                        onClick={advancedBuyUrl}
                      >
                        购买高级版套餐
                      </Button>
                      {lock !== 'normal' && (
                        <a
                          href={`https://devops.aliyun.com/org-admin/${orgId}/members/member`}
                          target="_blank"
                          rel="noreferrer"
                          style={{ marginRight: 16 }}
                        >
                          <Button type="normal">
                            {intl.get({
                              id: 'code-assets.components.billing.billingModal.DisableAnAccount',
                              defaultMessage: '停用账号',
                            })}
                          </Button>
                        </a>
                      )}
                    </>
                  ) : (
                    <Tooltip
                      align="t"
                      trigger={
                        <Button
                          type={reasonText ? 'primary' : 'normal'}
                          disabled
                          style={{ marginRight: 16 }}
                        >
                          购买高级版套餐
                        </Button>
                      }
                    >
                      <span>请联系管理员购买高级版套餐</span>
                    </Tooltip>
                  )}

                  {lock === 'limit' && (
                    <Button type="normal" style={{ marginRight: 16 }} onClick={closeFn}>
                      {intl.get({
                        id: 'code-assets.components.billing.billingModal.HandleLater',
                        defaultMessage: '稍后处理',
                      })}
                    </Button>
                  )}

                  {lock === 'normal' ? (
                    <>
                      <a
                        href="https://help.aliyun.com/document_detail/261146.html"
                        target="_blank"
                        rel="noreferrer"
                      >
                        <Button type="primary" text>
                          {intl.get({
                            id: 'code-assets.components.billing.billingModal.ViewAdvancedEditionExclusiveFeatures',
                            defaultMessage: '查看高级版专属功能',
                          })}
                        </Button>
                      </a>
                    </>
                  ) : null}
                </div>
              </div>
            </div>
          </div>
        </div>
      ) : null}
    </React.Fragment>
  );
};

export default Modal;
